﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<h1>Welcome to Simple Socxs</h1>
<h2>Index</h2>
<ul>
    <li><a href="#">Motivation</a></li>
    <li><a href="#">Demo</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Pages</a></li>    
    <li><a href="#">Streams</a></li>
    <li><a href="#">Streams in Page</a></li>        
    <li><a href="#">Custom Renderers</a></li>
    <li><a href="#">Assets</a></li>
</ul>
<h2>Motivation</h2>
<p>This project shows how to create a social aggregate website with the CMS style. CMS means user can define their own pages based on existing web techniques (HTML, CSS, JAVASCRIPT).</p>
<p>To achieve the goal, the system engine has three main parts.</p>
<ol>
    <li>Social data extractor. To fetch data from some social website. </li>
    <li>Data converter. To convert data from social stream to specific format used in CMS system.</li>
    <li>Renderer. To render how those data should look like in page.</li>
</ol>
<p>To more efficient editing social streams on page, there is a html editor driven by javascript and fully leveraged the front-end techniques i.e. javascript and css.</p>

<h2>Demo</h2>
<ol>
    <li>A page aggregated with many different social streams. <a target="_blank" href="/users/mikezhu/home">HERE</a></li>
    <li>A page with youtube video. <a target="_blank" href="/users/mikezhu/video">HERE</a></li>
    <li>A page with goode design. <a target="_blank" href="/users/mikezhu/design">HERE</a></li>
    <li>A page with custom renderers. <a target="_blank" href="/users/crazy_images/home">HERE</a></li>     
</ol>

<h2>Login</h2>
<p>In <a target="_blank" href="/login.aspx">Login Page</a>, type in valid username and signin. The system will automatically create the user if doesn't exist.</p>

<h2>Pages</h2>
<p>In <a target="_blank" href="/manage/pages.aspx">Pages</a>, you can manage the user's pages.</p>
<ol>
    <li>Add. Type in valid page name and choose a template. There are several system default templates defined in /shared. User can also define their own template in /users/[user]/templates. </li>
    <li>Edit. Edit the layout and streams of the page. SEE "Streams in Page" section. </li>
    <li>View</li>
    <li>Delete</li>
</ol>

<h2>Streams</h2>
<p>In <a target="_blank" href="/manage/streams.aspx">Streams</a>, you can manage the social streams.</p>
<ol>
    <li>Search content in any social media. Type in username and click search button it will show all fetched data or any possible error message.</li>
    <li>If successfully fetched social contents, type in the name for this stream and click 'Add Stream'. (if failed the 'Add' button will not appear)</li>
    <li>Update. To retrieve the social data again. The updated time will be set to current. </li>
    <li>Delete</li>
</ol>

<h2>Streams in Page</h2>
<p>This page is from clicking 'Edit' in <a target="_blank" href="/manage/pages.aspx">Pages</a>. It manages the layout and added social streams.</p>
<ul>
    <li>New. Click New button will create the panel for given social stream. The yellow rectangle represents the layout of it.</li>
    <li>Select one yellow rectange to edit the layout and social stream info. It becomes orange when focused.</li>
    <li>Some most important properties include: Title, Stream, Width, Height.</li>
    <li>To move the panel click 'Move to previous' and 'Move to next'.</li>
    <li>After be happy with the change of selected panel, don't forget to click 'Update'.</li>
    <li>Save all changes.</li>    
</ul>

<h2>Custom Renderers</h2>
<p>User can even design their own renderers to overwrite the default ones. Here is a <a target="_blank" href="/users/crazy_images/home">demo</a> to display random images from streams. It has defined custom renderers in /users/crazy_images/renders</p>

<h2>Assets</h2>
<p>In <a target="_blank" href="/manage/assets.aspx">Assets</a>, user can upload files to /users/[user]/assets.</p>
</body>
</html>
